﻿using System;

namespace RexToy.UI.Controls
{
    public class CollapseBlock : Container
    {
        private string __text;
        public string Text
        {
            get { return __text; }
            set
            {
                this.__text = value;
                var dom = this.__domNode.SearchByName("text");
                dom._element.InnerHTML = value;
            }
        }

        private bool __collapse;
        public bool Collapse
        {
            get { return __collapse; }
            set
            {
                this.__collapse = value;
                var container = this.__domNode.SearchByName("container");
                var icon = this.__domNode.SearchByName("icon");
                if (this.__collapse)
                {
                    container.RemoveClass("ui-collapsible-content-collapsed");
                    icon.ReplaceClass("ui-icon-plus", "ui-icon-minus");
                }
                else
                {
                    container.AppendClass("ui-collapsible-content-collapsed");
                    icon.ReplaceClass("ui-icon-minus", "ui-icon-plus");
                }
            }
        }

        public override Palette Palette
        {
            get
            {
                return __palette;
            }
            set
            {
                this.SetButtonClass(ButtonStatus.None);
                this.__palette = value;
                this.SetButtonClass(ButtonStatus.Up);
            }
        }

        public override bool Standalone
        {
            get
            {
                return __standalone;
            }
            set
            {
                var dom = this.__domNode.SearchByName("btn");
                if (value)
                {
                    dom.AppendClass("ui-btn-corner-all");
                    dom.AppendClass("ui-shadow");
                }
                else
                {
                    dom.RemoveClass("ui-btn-corner-all");
                    dom.RemoveClass("ui-shadow");
                }
                __standalone = value;
            }
        }


        private string[] events = new string[] { "onclick" };

        public CollapseBlock(string head)
        {
            this.__palette = Palette.C;
            this.__text = head;
            this.__domNode = RexToy.UI.Controls.DomNode.Create(new DomNodeCreateOptions()
            {
                tag = Tag.Div,
                className = "ui-collapsible-contain",
                items = new DomNodeCreateOptions[]
                {
                    new DomNodeCreateOptions()
                    {
                        tag= Tag.H3,
                        className= "ui-collapsible-heading",
                        items = new DomNodeCreateOptions[] 
                        {
                            new DomNodeCreateOptions()
                            {
                                tag= Tag.A,
                                hashName= "btn",
                                className= "ui-collapsible-heading-toggle ui-btn ui-btn-icon-left ui-shadow ui-corner-all ui-btn-up-c",
                                items= new DomNodeCreateOptions[]
                                {
                                    new DomNodeCreateOptions()
                                    {
                                        tag= Tag.Span,
                                        className= "ui-btn-inner ui-corner-all",
                                        items= new DomNodeCreateOptions[] 
                                        {
                                            new DomNodeCreateOptions()
                                            {
                                                tag= Tag.Span,
                                                className= "ui-btn-text",
                                                hashName = "text",
                                                innerHTML= head
                                            },
                                            new DomNodeCreateOptions()
                                            {
                                                tag= Tag.Span,
                                                className= "ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-d",
                                                items= new DomNodeCreateOptions[] 
                                                {
                                                    new DomNodeCreateOptions()
                                                    {
                                                        tag= Tag.Span,
                                                        className= "ui-btn-inner ui-btn-corner-all ui-corner-all",
                                                        items= new DomNodeCreateOptions[] 
                                                        {
                                                            new DomNodeCreateOptions()
                                                            {
                                                                tag= Tag.Span,
                                                                hashName = "icon",
                                                                className= "ui-icon ui-icon-shadow ui-icon-minus"
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    },
                    new DomNodeCreateOptions()
                    {
                        tag= Tag.Div,
                        hashName= "container",
                        className= "ui-collapsible-content"
                    }
                }
            });

            var dom = this.__domNode.SearchByName("btn");
            dom.AttachEvent(DomEvent.OnMouseOut, new Action(this.MouseUp).Bind(this));
            dom.AttachEvent(DomEvent.OnMouseDown, new Action(this.MouseDown).Bind(this));
            dom.AttachEvent(DomEvent.OnMouseOver, new Action(this.MouseOver).Bind(this));
            dom.AttachEvent(DomEvent.OnMouseUp, new Action(this.MouseUp).Bind(this));

            dom.AttachEvent(DomEvent.OnDoubleClick, new Action(this.OnClick).Bind(this));
            dom.AttachEvent(DomEvent.OnClick, new Action(this.OnClick).Bind(this));

            //this.SetCollapse(this.__collapse);//TODO:
        }

        private void SetButtonClass(ButtonStatus status)
        {
            var dom = this.__domNode.SearchByName("btn");
            ButtonStyleHelper.SetDomNodeClass(dom, status, this.__palette);
        }

        private void MouseOut()
        {
            this.SetButtonClass(ButtonStatus.Up);
        }

        private void MouseUp()
        {
            this.SetButtonClass(ButtonStatus.Up);
        }

        private void MouseDown()
        {
            this.SetButtonClass(ButtonStatus.Down);
        }

        private void MouseOver()
        {
            this.SetButtonClass(ButtonStatus.Hover);
        }

        private void OnClick()
        {
            this.Collapse = !this.Collapse;
            this.__FireEvent("onclick");
        }
    }
}
